<template>
  <div>
    <h2>新闻标题</h2>
    <ul>
      <li v-for="item in newsinfo" :key="item.id">
        <RouterLink
          :to="{
            name: 'Sonroutre3',
            query: { id: item.id, title: item.title, countent: item.countent }
          }"
          >{{ item.title }}</RouterLink
        >
      </li>
    </ul>
  </div>
  <div class="counten">
    <RouterView></RouterView>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { RouterLink, RouterView } from 'vue-router'

const newsinfo = reactive([
  { id: 1, title: '新闻一', countent: '今天心情真好！' },
  { id: 2, title: '新闻二', countent: '上的卡号打火机开花后' },
  { id: 3, title: '新闻三', countent: '答案红豆沙打开九年' },
  { id: 4, title: '新闻四', countent: 'u去哦让你发口交换机' }
])
</script>

<style lang="scss" scoped>
ul {
  display: flex;
  flex-direction: row;
  gap: 10px;
  li {
    width: 80px;
    height: 25px;
    border-radius: 5px;
    text-align: center;
    line-height: 25px;
    margin-bottom: 5px;
    a {
      width: 100%;
      height: 100%;
      display: inline-block;
    }
  }
}
</style>
